<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列偏移、列嵌套</title>
<!-- 
	${pageContext.request.contextPath} 在本工程中为：  /Bootstrap
	即使用本地的文件，需要将网上下载的bootstrap文件夹放入工程的WebContent目录下。
	在http://v3.bootcss.com/getting-started/#download 中文网提供的免费 CDN 加速服务
	他们使用如下方式：
		rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"
		rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"
		src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"
		src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"
-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
<style type="text/css">
	.c{
		border: 1px solid gray;
		background-color: #fff000;
	}
</style>
</head>
<body>
<h1 align="center">列偏移、列嵌套：</h1>
<hr>
<div class="container">
<!-- 列偏移 -->
	<div class="row">
	  <div class="col-md-4 c">.col-md-4</div>
	  <div class="col-md-4 col-md-offset-4 c">.col-md-4 .col-md-offset-4</div>
	</div>
	<div class="row">
	  <div class="col-md-3 col-md-offset-3 c">.col-md-3 .col-md-offset-3</div>
	  <div class="col-md-3 col-md-offset-3 c">.col-md-3 .col-md-offset-3</div>
	</div>
	<div class="row">
	  <div class="col-md-6 col-md-offset-3 c">.col-md-6 .col-md-offset-3</div>
	</div>
<!-- 列嵌套 -->
	<div class="row">
	  <div class="col-md-8 c">
	  	<div class="row">
	  		<div class="col-md-4 c">第二次4格子</div>
	  		<div class="col-md-4 c">第二次4格子</div>
	  		<div class="col-md-4 c">第二次4格子</div>
	  	</div>
	  </div>
	  <div class="col-md-4 c">.col-md-4</div>
	</div>
	<div class="row">
	  <div class="col-md-8 c">
	  	<div class="row">
		  <div class="col-md-3 col-md-offset-3 c">第二次3格子</div>
		  <div class="col-md-3 col-md-offset-3 c">第二次3格子</div>
	  	</div>
	  </div>
	  <div class="col-md-4 c">.col-md-4</div>
	</div>
</div>
</body>
</html>